<template>
	<div>
		<el-card>

			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>专区管理</el-breadcrumb-item>
			</el-breadcrumb>


			<el-row type="flex" justify="space-between">
				<div>
					<el-button size="small" icon="el-icon-plus" @click="addSpecials">添加</el-button>
					<el-button size="small" icon="el-icon-circle-check" @click="updateSpecial('1')">启用</el-button>
					<el-button size="small" icon="el-icon-circle-close" @click="updateSpecial('0')">禁用</el-button>
					<el-button size="small" icon="el-icon-circle-close" @click="deteleSpecial">删除</el-button>
				</div>
			</el-row>
			<el-table height="700" align="center" :data="specialsList" border style="width: 100%;margin-top:8px;"
				:header-cell-style="{ background: '#409EFF', color: '#FFF' }" @selection-change="selectChange"><!---->
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="specialId" label="编号" width="55"></el-table-column>
				<el-table-column label="图片">
					<template slot-scope="prop">
						<el-image v-if="prop.row.specialFlag == 0" fit style="width:50px;height:50px;"
							:src="path + 'zhonghui/special/' + prop.row.specialImg" :previewSrcList="[
								path + prop.row.specialImg]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="specialName" label="名称"></el-table-column>
				<el-table-column prop="specialPaixu" label="排序"></el-table-column>
				<!-- <el-table-column label="分类">
					<template slot-scope="prop">
						<el-tag v-if="prop.row.specialFlag == 0" type="danger">专区分类</el-tag>
						<el-tag v-if="prop.row.specialFlag == 1" type="success">标签分类</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column label="状态">
					<template slot-scope="prop">
						<el-tag v-if="prop.row.specialStatus == 0" type="danger">未启用</el-tag>
						<el-tag v-if="prop.row.specialStatus == 1" type="success">启用中</el-tag>
						<el-tag v-if="prop.row.specialStatus == 2" type="success">金卡会员专区</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="300">
					<template slot-scope="prop">

						<el-button type="primary" size="small" @click="checkPro(prop.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog title="添加/修改" :visible.sync="addDialog">
				<el-form :model="special" label-width="120px" ref="special">
					<el-form-item label="名称" prop="specialName"
						:rules="{ required: true, message: '请填写名称', trigger: 'change' }">
						<el-input v-model="special.specialName" clearable style="width:200px;"
							placeholder="输入名字"></el-input>
					</el-form-item>
					<!-- <el-form-item label="类别" :rules="{ required: true, message: '请选择关联内容', trigger: 'change' }"
						prop="specialFlag">
						<el-select v-model="special.specialFlag" placeholder="请选择">
							<el-option value="0" label="专区">专区分类</el-option>
							<el-option value="1" label="标签分类">标签分类</el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="排序" prop="specialPaixu"
						:rules="{ required: true, message: '请填写排序数字', trigger: 'change' }">
						<el-input v-model="special.specialPaixu" clearable style="width:200px;"
							placeholder="输入排序数字"></el-input>
						<div class="sortTip">tips：数值越大，在列表中越靠前，最小数值为1</div>
					</el-form-item>
					<el-form-item label="专区关联商品" prop="productIds"
						:rules="{ required: true, message: '请选择专区关联商品', trigger: 'change' }">
						<el-select v-model="special.productIds" filterable clearable multiple collapse-tags
							placeholder="请选择">
							<el-option v-for="item in productList" :key="item.productId" :label="item.productName"
								:value="item.productId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="主页展示商品" :rules="{ required: true, message: '请选择主页展示商品', trigger: 'change' }"
						prop="specialProducts">
						<el-select v-model="special.specialProducts" filterable clearable multiple collapse-tags
							placeholder="请选择">
							<el-option v-for="item in productList" :key="item.productId" :label="item.productName"
								:value="item.productId">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="状态" :rules="{ required: true, message: '请选择状态', trigger: 'change' }"
						prop="specialStatus">
						<el-select v-model="special.specialStatus" placeholder="请选择">
							<el-option value="0" label="禁用">禁用</el-option>
							<el-option value="1" label="启用">启用</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="图标" prop="file">
						<el-upload class="upload-demo" action="aa" :on-change="picChange" list-type="picture"
							:auto-upload="false" name="file" accept="*" :limit="1" ref="addFile">
							<el-button size="small" type="primary">点击上传</el-button>
						</el-upload>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancelBox">取 消</el-button>
					<el-button type="primary" @click="addSubmit">确 定</el-button>
				</div>
			</el-dialog>
		</el-card>




	</div>
</template>

<script>
import { getProductList } from "../../network/productManage";
import {
	getProductSpecials,
	addSpecial,
	updateSpecial,
	deleteSpecial
} from 'network/specials'
export default {
	data() {
		return {
			path: 'https://zbz-imgs.oss-cn-beijing.aliyuncs.com/',
			specialsList: [],
			productList: [],
			addDialog: false,
			special: {
				specialName: '',
				specialFlag: '',
				productIds: [],
				specialProducts: [],
				file: '',
				specialStatus: '',
				specialPaixu: 1,//排序
				shopId: '',
			},
			checkList: [],
			flag: 'add',
			selectShopId: '0',
			shopList: []
		}
	},
	methods: {
		selectChange(val) {
			console.log(val);
			this.checkList = val;
		},
		checkPro(pro) {
			this.special = {
				specialName: pro.specialName,
				specialFlag: pro.specialFlag,
				productIds: [],
				specialProducts: [],
				specialStatus: pro.specialStatus,
				specialId: pro.specialId,
				specialPaixu: pro.specialPaixu,
			}
			console.log(this.special);
			var ids = pro.productIds.split(",");
			var specIds = pro.specialProducts.split(",");
			for (var i in ids) {
				this.special.productIds.push(parseInt(ids[i]));
			}
			for (var i in specIds) {
				this.special.specialProducts.push(parseInt(specIds[i]));
			}
			console.log(this.special);
			this.addDialog = true;
			this.flag = "edit";

		},


		addSubmit() {
			this.$refs.special.validate(valid => {
				if (!valid) return false;
				let fd = new FormData();
				console.log(this.special);

				fd.append("specialName", this.special.specialName);
				
				// fd.append("specialFlag", this.special.specialFlag);

				fd.append("specialFlag", 0);

				fd.append("specialStatus", this.special.specialStatus);


				// 排序
				fd.append("specialPaixu", this.special.specialPaixu);
				fd.append("productIds", this.special.productIds.toString());
				fd.append("specialProducts", this.special.specialProducts.toString());
				fd.append("file", this.special.file);

				if (this.flag == "edit") {
					fd.append("specialId", this.special.specialId);
				}

				fd.append("shopId", sessionStorage.shop_id);
				fd.append("flag", this.flag);

				addSpecial(fd).then(res => {
					console.log(res);
					if (res.flag) {
						this.$message.success("上传成功");
						this.addDialog = false;
						this.special = {
							specialName: '',
							specialPaixu: '',
							specialFlag: 0,
							productIds: [],
							specialProducts: [],
							file: '',
						};
						this.getData();
					} else {
						console.log(res);
						this.$message.success("上传失败");
					}
				});
			});
		},
		cancelBox() {
			this.$refs.special.resetFields()
			this.special = {
				specialName: '',
				specialFlag: 0,
				specialPaixu: "",
				productIds: [],
				specialProducts: [],
				file: '',
			};
			this.addDialog = false;
		},
		picChange(file) {
			this.special.file = file.raw;
		},
		addSpecials() {
			this.addDialog = true;
			if (this.productList.length == 0) {
				this.getProductList();
			}
		},
		// 获取全部商品
		getProductList() {
			getProductList({
				page: 1,
				size: 500,
				shopId: 0,
				productName: '',
				productStatus: -1,
			}).then(res => {
				console.log(res);
				if (res.flag) {
					this.productList = res.data.list;
				}
			})
		},
		getData() {
			getProductSpecials({
				flag: 0
			}).then(res => {
				console.log(res);
				if (res.flag) {
					this.specialsList = res.data;
				}
			})
		},
		updateSpecial(status) {
			if (this.checkList.length === 0)
				return this.$message.warning('请选择要操作的数据')
			let ids = [];
			for (var i = 0; i < this.checkList.length; i++) {
				ids.push(this.checkList[i].specialId);
			}
			updateSpecial({
				ids: ids.toString(),
				status: status,
			}).then((res) => {
				console.log(res)
				if (res.flag) {
					this.getData()
					this.$message.success('状态更新成功')
				} else {
					this.$message.error('状态更新失败')
				}
			})
		},
		// 删除
		deteleSpecial() {
			if (this.checkList.length === 0)
				return this.$message.warning('请选择要操作的数据')
			let ids = [];
			for (var i = 0; i < this.checkList.length; i++) {
				ids.push(this.checkList[i].specialId);
			}
			deleteSpecial({
				ids: ids.toString(),
			}).then((res) => {
				console.log(res)
				if (res.flag) {
					this.getData()
					this.$message.success('删除成功')
				} else {
					this.$message.error('删除失败')
				}
			})
		},

	},
	created: function () {
		this.getData();
		this.getProductList()
	}
}
</script>

<style></style>